<template>
    <view class="purchaseDetailContainer">
        <!-- 订单我的/商品详订单情 -->
        <cunstom_navigation_bar :tapEvent="goback" :propStyles="propStyles" :title="'待自提'">
        </cunstom_navigation_bar>
        <view class="contentBox">
            <!-- 待提货 -->
            <view class="statusBox" v-if="orderDetail.orderstate==0 && orderDetail.shippingstate==1">
                <view class="statusTxt">11月6日，请前往自提店提货~</view>
                <view class="tip">
                    <span>货已安排运达到提货点，注意查收</span>
                </view>
                <view class="btns">
					<!--
                    <view class="button mg">更多</view>
                    <view class="button mg" >再来一单</view>
					-->
                    <view class="  yellow1" @tap="ok">确认收货</view>
                </view>
            </view>
            <!-- 待支付 -->
            <view class="statusBox"  v-if="orderDetail.orderstate==0 && orderDetail.paystate==0">
                <view class="statusTxt">未支付，请在<span>15:00</span>内支付</view>
                <view class="attention">
                    逾期未支付订单将会自动取消
                </view>
                <view class="btns">
					<!--
                    <view class="button mg">更多</view>
                    <view class="button mg" >再来一单</view>
					-->
                    <view class="  red" @tap="pay">立即支付￥{{orderDetail.amount}}</view>
                </view>
            </view>
            <!-- 订单取消 -->
            <view class="statusBox"  v-if="orderDetail.orderstate==1">
                <view class="statusTxt">订单已经取消</view>
                <view class="tip">
                    <span>支付超时，订单已经取消</span>
                </view>
                <view class="btns">
					<!--
                    <view class="button mg">更多</view>
                    <view class="button mg" >再来一单</view>
					-->
                </view>
            </view>
            <!-- 订单已经完成 -->
            <view class="statusBox"  v-if="orderDetail.orderstate==3">
                <view class="statusTxt">订单已完成</view>
                <view class="tip">
                    <span>感谢你的惠顾，期待再次光临..</span>
                </view>
                <view class="btns">
					<!--
                    <view class="button mg">更多</view>
                    <view class="button mg" >再来一单</view>
					-->
                </view>
            </view>
            

            <view class="orderBox">

                <view class="line2">
                    <view class="item1">
                        <view class="line2" >
                        	<image class="item1" src="https://visionmpapi.jiuerjindi.com/upload/mp/myOrder/order2.png"></image>
                            <view class="item2">{{orderDetail.receiver}}</view>
                        </view>
                        <view class="line2" >
                        	<image class="item1" src="https://visionmpapi.jiuerjindi.com/upload/mp/myOrder/order1.png"></image>
                            <view class="item2">24小时便利蜂</view>
                        </view>
                        <view class="line2" >
                        	<view class="item1"></view>
                            <view class="item2">江苏省苏州市工业园区唯亭街道z国际大厦1205</view>
                        </view>
                    </view>
                    <image class="item2" src="https://visionmpapi.jiuerjindi.com/upload/mp/index/recommend (1).png">
                    </image>
                </view>
				<view class="line23" >
				    营业时间：8:00-21:00 | 具体取货时间可联系自提点
				</view>
				<view class="line24" >
				    <uni-section title="纵向排列" type="line" padding>
				    	<uni-steps :options="orderStateList" active-color="#007AFF" :active="2" direction="column" />
				    </uni-section>
				</view>
				<view class="line25" >
					<view class="item1" >
						<image class="item1" src="https://visionmpapi.jiuerjindi.com/upload/mp/myOrder/order2.png"></image>
						<view class="item2" > 自提码 </view>
					</view>
					<!--
					<view class="item1" >
						<image class="item1" src="https://visionmpapi.jiuerjindi.com/upload/mp/myOrder/order2.png"></image>
						<view class="item2" > 分享 </view>
					</view>
					<view class="item1" >
						<image class="item1" src="https://visionmpapi.jiuerjindi.com/upload/mp/myOrder/order2.png"></image>
						<view class="item2" > 联系自提点 </view>
					</view>
					<view class="item1" >
						<image class="item1" src="https://visionmpapi.jiuerjindi.com/upload/mp/myOrder/order2.png"></image>
						<view class="item2" > 导航 </view>
					</view>
					-->
				</view>
            </view>
			
			<view class="orderList">
				<!--
				<view class="line1">
					<image class="item1" src="https://visionmpapi.jiuerjindi.com/upload/mp/index/recommend (1).png">
					<view class="item2" >
						<view class="item2" > 
							<view class="line11" >
								<view class="item111" >海天黄豆酱</view>
								<view class="item112" >实付￥15.8</view>
							</view>
							<view class="line22" >
								<view class="item221" >单价：￥41.99/条</view>
								<view class="item222" >数量：1</view>
							</view>
						</view>
					</view>
				</view>
				-->
				<view class="line1" v-for="(item,index) in orderDetail.goods">
					<image class="item1" :src="item.image">
					<view class="item2" >
						<view class="item2" > 
							<view class="line11" >
								<view class="item111" >{{item.title}}</view>
								<view class="item112" >实付￥{{item.price}}</view>
							</view>
							<view class="line22" >
								<view class="item221" >单价：￥{{item.price}}/条</view>
								<view class="item222" >数量：{{item.nums}}</view>
							</view>
						</view>
					</view>
				</view>
				
				<view class="linehx"></view>
				
				<view class="line3">
					<view class="item1" >商品金额</view>
					<view class="item2" >共{{orderDetail.goods.length}}件</view>
					<view class="right1" >已优惠￥0</view>
					<view class="right2" >￥{{orderDetail.amount}}</view>
					
				</view>
					
			</view>
			
			
            <view class="details">
                <view class="detail">
                    <view class="left">订单编号</view>
                    <view class="right">复制<span class="seperate">|</span><span class="grey">{{orderDetail.order_sn}}</span></view>
                </view>
                <view class="detail">
                    <view class="left">下单时间 </view>
                    <view class="right">{{ formatTimestamp(orderDetail.create_at) }}</view>
                </view>
                <view class="detail">
                    <view class="left">支付方式</view>
                    <view class="right">微信</view>
                </view>
            </view>


        </view>



        <view class="zhanwei"></view>




    </view>
</template>
<script>
    const util = require("@/utils/util.js");
    const api = require("@/utils/api.js");
    var QQMapWX = require('../utils/qqmap-wx-jssdk.js');
    const mapChange = require('../utils/mapChange.js');

    const app = getApp();
    export default {
        data() {
            return {
                selectedIndex: 1,
                statusIndex: 0,
                statusArray: [
                    {
                        value: '',
                        text: '全部'
                    },
                    {
                        value: 1,
                        text: '待付款'
                    },
                    {
                        value: 2,
                        text: '服务中'
                    },
                    {
                        value: 3,
                        text: '已完成'
                    }

                ],
                imgDomain: "",

                labels: [
                    {
                        name: '厨艺很好',
                        selected: true
                    },
                    {
                        name: '特别美味',
                        selected: true
                    },
                    {
                        name: '很好吃',
                        selected: false
                    },
                    {
                        name: '特别谦虚',
                        selected: false
                    } 
                ],
                propStyles: { 
                    iconSrc: "black",
                    // bgColor: '#FECF01', 
                },
				// 订单详情
				orderDetail : null,
				orderStateList: [  {
					title: '交易完成',
					desc: '2018-11-14'
				},{
					title: '买家签收',
					desc: '2018-11-13'
				},{
					title: '卖家发货',
					desc: '2018-11-12'
				},{
					title: '买家下单',
					desc: '2018-11-11'
				} ]

            };
        },
        computed: {

        },
        methods: {
			getEndPayTime(timestamp){
				
				// 创建一个 Date 对象
				const date = new Date(timestamp*1000 + 15*60 *1000);
				 
				// 提取年、月、日、小时、分、秒
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1，并补零
				const day = String(date.getDate()).padStart(2, '0'); // 补零
				const hours = String(date.getHours()).padStart(2, '0'); // 补零
				const minutes = String(date.getMinutes()).padStart(2, '0'); // 补零
				const seconds = String(date.getSeconds()).padStart(2, '0'); // 补零
				 
				// 格式化输出
				return `${hours}:${minutes}:${seconds}`;
				
			},
			formatTimestamp(timestamp){
				console.log("->timestamp:"+ timestamp);
				// 创建一个 Date 对象
				const date = new Date(timestamp*1000);
				 
				// 提取年、月、日、小时、分、秒
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1，并补零
				const day = String(date.getDate()).padStart(2, '0'); // 补零
				const hours = String(date.getHours()).padStart(2, '0'); // 补零
				const minutes = String(date.getMinutes()).padStart(2, '0'); // 补零
				const seconds = String(date.getSeconds()).padStart(2, '0'); // 补零
				 
				// 格式化输出
				return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			},
            changeIndex(index) {
                this.statusIndex = index;
            },
           
            deleteFile(e) {
                console.log(" e.tempFilePath:" + e.tempFile.name);
                // this.formData3.educationImgs.map((item, i) => {
                // 	if (item.name == e.tempFile.name) {
                // 		this.formData.educationImgs.splice(i, 1)
                // 	}
                // })
            },
            // 相关证书
            goBack() {

                uni.navigateBack()
            },
            change(index) {
                this.labels[index].selected = !this.labels[index].selected
            },

            jumpUrl(num) {
                if (num == 1) {
                    uni.navigateTo({

                        url: `/page_changeAddress/changeAddress?id=${this.defaultAddress.id}&mallProductId=${this.mallProductId}&skuId=${this.skuId}&quantity=${this.quantity}`
                    })
                } else if (num == 2) {
                    uni.navigateTo({
                        url: `/page_addressEdit/addressEdit?id=null&mallProductId=${this.mallProductId}&skuId=${this.skuId}&quantity=${this.quantity}`
                    })
                } else if (num == 3) {
                    uni.navigateTo({
                        url: `/page_protocol/protocol`,
                    })
                }
            },
            goback() {
                console.log("回去");
                uni.navigateBack();
            },
			// 再来一单
			agianOrder(){
				
			},
			// 评价
			evaluate(){
				uni.navigateTo({
					url: `/page_evaluate/evaluate?id=`+ this.orderDetail.id ,
				}) 
			},
			// 详情
			shopOrderGet(sn){
				let params = {order_sn : sn}
				let that = this;
				util.request(api.shopOrderGet, params
				  , 'GET', 'application/json').then(res => {
				    if (res.code == 200) {
						that.orderDetail = res.data;
				    }
				
				  }).catch((err) => {
				    console.log('err', err)
				
				  });
			},
			pay(){
				let payParams = {
					type : 'shop',
					order_id : this.orderDetail.id
				};
				let that = this;
				util.request(api.cookPaySFT, payParams
				  , 'POST', 'application/x-www-form-urlencoded').then(res => {
				    if (res.code == 200) {
						
						let outTradeNo = res.data.outTradeNo;
						
						uni.requestPayment({
						  //provider: 'wxpay',
						  timeStamp: res.data.timeStamp,
						  nonceStr: res.data.nonceStr,
						  package: res.data.package,
						  // signType: 'MD5',
						  signType: res.data.signType,
						  paySign: res.data.paySign,
						  success: function (res) {
						    //支付成功，跳转完成支付订单详情页
						    console.log('success:' + JSON.stringify(res));
							that.shopOrderGet(that.orderDetail.order_sn);
						  },
						  fail: function (err) {
						    console.log('fail:' + JSON.stringify(err));
						    //支付不成功，跳转未支付订单详情页
							that.shopOrderGet(that.orderDetail.order_sn);
							 
						  }
						});
					}
				});
			},
			cancel(){ // 
				let payParams = {
					id : this.orderDetail.id,
					orderstate : 1
				};
				let that = this;
				util.request(api.orderUpdate, payParams
				  , 'POST', 'application/x-www-form-urlencoded').then(res => {
				    if (res.code == 200) {
						util.toast('取消成功')
						that.shopOrderGet(that.orderDetail.order_sn);
					}
				});
			},
			ok(){ //
				let payParams = {
					id : this.orderDetail.id,
					orderstate : 3
				};
				let that = this;
				util.request(api.orderUpdate, payParams
				  , 'POST', 'application/x-www-form-urlencoded').then(res => {
				    if (res.code == 200) {
						util.toast('确认成功')
						that.shopOrderGet(that.orderDetail.order_sn);
					}
				});
			}

        },
        onReady() { },
        // onShow(){

        //       },
        created() { },
        onShow: function () {

        },
        watch: {

        },


        onLoad: function (option) {

            this.imgDomain = process.env.VUE_APP_BASE_URL;
			
			let orderSn = option.orderSn;
			this.shopOrderGet(orderSn);
        },

    };
</script>
<style lang="scss">
    page {
        height: 100vh;
        overflow: auto;
        background: #F4F4F2;
    }
</style>
<style lang="scss" scoped>
    .purchaseDetailContainer {
        background: #f4f4f2;
        box-sizing: border-box;

        /* ::v-deep .companyInfoContainer {
        position: absolute;
        top: 0rpx;
        left: 0rpx;
  
        .navigationBar {
          background: transparent;
        }
      } */
    }

    .contentBox {
        width: 100%;

        .statusBox {
            padding: 30rpx;
            background: #FFFFFF;
            margin-bottom: 22rpx;
            border-radius: 20rpx 20rpx 20rpx 20rpx;

            .statusTxt {
                font-weight: 500;
                font-size: 40rpx;
                color: #333333;
                margin-bottom: 20rpx;

                span {
                    color: #D93F11;
                    font-weight: 500;
                    font-size: 40rpx;
                }
            }

            .attention {
                font-weight: 400;
                margin-bottom: 34rpx;
                font-size: 28rpx;
                color: #333333;
            }

            .tip {
                margin-bottom: 34rpx;
                display: flex;
                align-items: center;

                .hornIcon {
                    width: 42rpx;
                    height: 42rpx;
                    margin-right: 20rpx;
                }

                span {
                    font-weight: 400;
                    font-size: 28rpx;
                    color: rgba(51, 51, 51, 0.6);
                }
            }

            .btns {
                display: flex;
                justify-content: flex-end;

                .button {
                    width: 151rpx;
                    height: 72rpx;
                    line-height: 72rpx;
                    text-align: center;
                    background: #FFFFFF;
                    border-radius: 20rpx 20rpx 20rpx 20rpx;
                    border: 1rpx solid rgba(51, 51, 51, 0.4);
                    font-weight: 500;
                    font-size: 32rpx;
                    color: #333333;
                }

                .yellow {
                    width: 182rpx;
                    height: 72rpx;
                    background: #FECF01;
                    border-radius: 20rpx 20rpx 20rpx 20rpx;
                    border: 1rpx solid rgba(51, 51, 51, 0.4);
                }

                .mg {
                    margin-right: 18rpx;
                }

                .red {
					/*width: 346rpx;*/
                    padding: 0rpx 60rpx;
                    height: 72rpx;
                    background: #D93F11;
                    border-radius: 20rpx 20rpx 20rpx 20rpx;
                    font-weight: 500;
                    font-size: 32rpx;
                    color: #FFFFFF;
                    height: 72rpx;
                    line-height: 72rpx;
                    text-align: center;
                }

                .yellow1 {
                    width: 346rpx;
                    padding: 0rpx 60rpx;
                    height: 72rpx;
                    background: #FECF01;
                    border-radius: 20rpx 20rpx 20rpx 20rpx;
                    font-weight: 500;
                    font-size: 32rpx;
                    color: #FFFFFF;
                    height: 72rpx;
                    line-height: 72rpx;
                    text-align: center;
                }
            }
        }

        .personalInfo {
            width: 750rpx;
            height: 216rpx;
            background: #FFFFFF;
            box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.1);
            border-radius: 20rpx 20rpx 20rpx 20rpx;
            padding: 40rpx 30rpx 30rpx;
            margin-bottom: 20rpx;

            .addr {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 20rpx;

                .icon {
                    width: 50rpx;
                    height: 52rpx;
                }

                .center {
                    width: 550rpx;
                    word-wrap: break-word;
                    font-weight: 500;
                    font-size: 28rpx;
                    color: #2E3331;
                    line-height: 45rpx;
                }

                .right {
                    color: rgba(51, 51, 51, 0.6);
                }
            }

            .phone {
                font-weight: 500;
                font-size: 28rpx;
                color: #333333;
            }
        }



        .orderBox {
            padding: 26rpx 30rpx 36rpx;
            width: 750rpx;
            margin-bottom: 24rpx;
            background: #FFFFFF;
            box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(0, 0, 0, 0.16);
            border-radius: 20rpx 20rpx 20rpx 20rpx;

            .line2 {
              width: 100%;
			  display: flex; /* 启用Flexbox布局 */
			  flex-direction: row; /* 子元素沿水平方向排列（默认为row） */
			  justify-content: space-between; /* 子元素间的间隔均匀分布，首尾元素贴近边缘（可根据需要调整） */
			  align-items: center; /* 子元素在垂直方向上居中对齐（若需要） */
			  .item1{
				  display: flex;
				  flex-direction: column;
				  align-items: flex-start; /* 改为靠左对齐 */
				 
				 .line2{
					width: 500rpx;
				 	height: 50rpx;
				 	padding-left: 0rpx;
				 	padding-right: 0rpx;
				 	margin-top: 0rpx;
				 	display: flex; /* 启用Flexbox布局 */
				 	flex-direction: row; /* 子元素沿水平方向排列（默认为row） */
				 	display: flex; /* 启用Flexbox布局 */
				 	align-items: center; /* 子元素在垂直方向上居中对齐（若需要） */
				 	.item1{
				 		width: 36rpx;
				 		height: 36rpx;
				 		border-radius: 0rpx 0rpx 0rpx 0rpx;
				 	}
				 	.item2{
				 		margin-left: 12rpx;
				 		width: 470rpx;
				 		height: 40rpx;
				 	  	line-height: 40rpx; /* 行高与容器高度一致，实现垂直居中 */
				 		font-family: OPPOSans, OPPOSans;
				 		font-weight: 400;
				 		font-size: 24rpx;
				 		color: #333333;
				 		line-height: 32rpx;
				 		text-align: left;
				 		font-style: normal;
				 		text-transform: none;
				 	  	/* 文字垂直居中的关键 */
				 		display: flex; /* 将.item也设为Flex容器 */
				 	  	align-items: center; /* 使子元素（在这里是文字）在垂直方向上居中对齐 */
				 	}
				 } 
				  
			  }
			  .item2{
				  width: 175rpx;
				  height: 172rpx;
				  border-radius: 10rpx 10rpx 10rpx 10rpx;
				  margin-left: auto;
				  margin-right: 28rpx;
			  }
                 
            }
			
			.line23 {
				height: 48rpx;
				font-family: OPPOSans, OPPOSans;
				font-weight: 500;
				font-size: 24rpx;
				color: rgba(51,51,51,0.5);
				line-height: 34rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
				margin-left: 36rpx;
				margin-top: 18rpx;
			}
			.line24{
				width: 694rpx;
				background: #F5F5F5;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				display: flex;
				margin-top: 15rpx;
				display: flex; /* 启用Flexbox布局 */
				flex-direction: row; /* 子元素沿水平方向排列（默认为row） */
				display: flex; /* 启用Flexbox布局 */
				align-items: center; /* 子元素在垂直方向上居中对齐（若需要） */
			}
			.line25{
				width: 694rpx;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				margin-top: 15rpx;
				flex-direction: row; /* 子元素沿水平方向排列（默认为row） */
				display: flex; /* 启用Flexbox布局 */
				align-items: center; /* 子元素在垂直方向上居中对齐（若需要） */
				flex: 1; /* 子元素平均分配剩余空间（若需不等宽，可分别设置flex值） */
				.item1{
					display: flex; /* 启用Flexbox布局 */
					flex-direction: row; /* 子元素沿水平方向排列（默认为row） */
					align-items: center; /* 子元素在垂直方向上居中对齐（若需要） */
					.item1{
						width: 36rpx;
						height: 36rpx;
						border-radius: 0rpx 0rpx 0rpx 0rpx;
					}
					.item2{
					  	/* 文字垂直居中的关键 */
						display: flex; /* 将.item也设为Flex容器 */
					  	align-items: center; /* 使子元素（在这里是文字）在垂直方向上居中对齐 */
						margin-left: 12rpx;
						height: 30rpx;
						font-family: OPPOSans, OPPOSans;
						font-weight: 500;
						font-size: 20rpx;
						color: #333333;
						line-height: 30rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
						margin-right: 58rpx;
					}
				}
			}
			

            .line3 {
                width: 100%;
                justify-content: flex-end;
                display: flex;
                align-items: center;
                margin-bottom: 20rpx;

                .num {
                    font-weight: 500;
                    font-size: 24rpx;
                    color: rgba(51, 51, 51, 0.6);
                    margin-right: 22rpx;
                }

                .total {
                    font-weight: 500;
                    font-size: 24rpx;
                    color: rgba(51, 51, 51, 0.6);

                    span {
                        color: #D93F11;
                        font-size: 28rpx;
                        font-weight: 700;
                    }
                }

            }

            .line4 {
                font-weight: 400;
                font-size: 24rpx;
                color: #D93F11;
                width: 100%;
                justify-content: flex-end;
                display: flex;
                margin-bottom: 20rpx;
            }

            .line5 {
                margin-top: 28rpx;
                font-weight: 400;
                font-size: 24rpx;
                color: rgba(51, 51, 51, 0.6);

                span {

                    font-weight: 400;
                    font-size: 24rpx;
                    color: #333333;
                }

            }
        }

			.orderList {
			    padding: 26rpx 30rpx 36rpx;
			    width: 750rpx;
			    margin-bottom: 24rpx;
			    background: #FFFFFF;
			    box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(0, 0, 0, 0.16);
			    border-radius: 20rpx 20rpx 20rpx 20rpx;
				  display: flex; /* 启用Flexbox布局 */
				  flex-direction: column; /* 子元素沿水平方向排列（默认为row） */
				  justify-content: space-between; /* 子元素间的间隔均匀分布，首尾元素贴近边缘（可根据需要调整） */
				  align-items: center; /* 子元素在垂直方向上居中对齐（若需要） */
				 .line1{ 
					  display: flex; /* 启用Flexbox布局 */
					  flex-direction: row; /* 子元素沿水平方向排列（默认为row） */
					  justify-content: space-between; /* 子元素间的间隔均匀分布，首尾元素贴近边缘（可根据需要调整） */
					  margin-top: 28rpx;
					  margin-bottom: 28rpx; 
					.item1{
						width: 112rpx;
						height: 120rpx;
						box-shadow: 0rpx 4rpx 4rpx 0rpx rgba(0,0,0,0.1);
						border-radius: 20rpx 20rpx 20rpx 20rpx;
						margin-left: 28rpx;
					}
					.item2{
						margin-left: auto;
						margin-right: 0rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						
						.line11{
							width: 550rpx;
							height: 50rpx;
							padding-left: 18rpx;
							padding-right: 0rpx;
							margin-top: 0rpx;
							display: flex; /* 启用Flexbox布局 */
							flex-direction: row; /* 子元素沿水平方向排列（默认为row） */
							display: flex; /* 启用Flexbox布局 */
							align-items: center; /* 子元素在垂直方向上居中对齐（若需要） */
							.item111{width: 200rpx;
								height: 32rpx;
								font-family: OPPOSans, OPPOSans;
								font-weight: 500;
								font-size: 28rpx;
								color: rgba(51,51,51,0.8);
								line-height: 32rpx;
								text-align: left;
								font-style: normal;
								text-transform: none;
								text-align: left;
							}
							.item112{
								width: 120rpx;
								height: 32rpx;
								font-family: OPPOSans, OPPOSans;
								font-weight: 500;
								font-size: 20rpx;
								color: #333333;
								line-height: 32rpx;
								text-align: left;
								font-style: normal;
								text-transform: none;
								/* 文字垂直居中的关键 */
								display: flex; /* 将.item也设为Flex容器 */
								align-items: center; /* 使子元素（在这里是文字）在垂直方向上居中对齐 */
								margin-left: auto;
								margin-right: 0rpx;
							}
						}
						
						.line22{
							width: 550rpx;
							height: 50rpx;
							padding-left: 18rpx;
							padding-right: 0rpx;
							margin-top: 0rpx;
							display: flex; /* 启用Flexbox布局 */
							flex-direction: row; /* 子元素沿水平方向排列（默认为row） */
							display: flex; /* 启用Flexbox布局 */
							align-items: center; /* 子元素在垂直方向上居中对齐（若需要） */
							.item221{
								width: 200rpx;
								height: 32rpx;
								font-family: OPPOSans, OPPOSans;
								font-weight: 400;
								font-size: 24rpx;
								color: rgba(51,51,51,0.6);
								line-height: 32rpx;
								text-align: left;
								font-style: normal;
								text-transform: none;
								text-align: left;
							}
							.item222{
								width: 120rpx;
								height: 32rpx;
								font-family: OPPOSans, OPPOSans;
								font-weight: 400;
								font-size: 24rpx;
								color: rgba(51,51,51,0.6);
								line-height: 32rpx;
								text-align: left;
								font-style: normal;
								text-transform: none;
								/* 文字垂直居中的关键 */
								display: flex; /* 将.item也设为Flex容器 */
								align-items: center; /* 使子元素（在这里是文字）在垂直方向上居中对齐 */
								margin-left: auto;
								margin-right: 0rpx;
							}
						}
					
					}
				}
				.linehx{
					width: 647rpx;
					height: 2rpx;
					margin-top: 50rpx;
					background: #D8D8D8;
				}
				.line3{
					width: 100%;
					margin-top: 28rpx;
					display: flex; /* 启用Flexbox布局 */
					flex-direction: row; /* 子元素沿水平方向排列（默认为row） */
					justify-content: space-between; /* 子元素间的间隔均匀分布，首尾元素贴近边缘（可根据需要调整） */	
					align-items: center; /* 子元素在垂直方向上居中对齐（若需要） */			
					.item1{
						width: 96rpx;
						height: 24rpx;
						font-family: OPPOSans, OPPOSans;
						font-weight: 400;
						font-size: 24rpx;
						color: #333333;
						line-height: 24rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
					}	
					.item2{
						width: 44rpx;
						height: 24rpx;
						font-family: OPPOSans, OPPOSans;
						font-weight: 500;
						font-size: 16rpx;
						color: rgba(51,51,51,0.6);
						line-height: 24rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
					}
					.right1{
						margin-left: auto;
						margin-right: 0rpx;		
						width: 132rpx;
						height: 24rpx;
						font-family: OPPOSans, OPPOSans;
						font-weight: 400;
						font-size: 20rpx;
						color: #D93F11;
						line-height: 24rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;										
					}
					.right2{
						margin-left: auto;
						margin-right: 0rpx;	
						width: 106rpx;
						height: 28rpx;
						font-family: OPPOSans, OPPOSans;
						font-weight: 500;
						font-size: 20rpx;
						color: #333333;
						line-height: 28rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;											
					}
									
				}
				
			}
        .coupon {
            width: 750rpx;
            height: 90rpx;
            background: #FFFFFF;
            box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.1);
            border-radius: 20rpx 20rpx 20rpx 20rpx;
            padding: 0rpx 30rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .left {
                font-weight: 500;
                font-size: 28rpx;
                color: rgba(51, 51, 51, 0.6);
            }

            .right {
                display: flex;
                align-items: center;
            }

            .r1 {
                font-weight: 500;
                font-size: 28rpx;
                color: #333333;
                margin-right: 34rpx;
            }

            .r2 {
                font-weight: 500;
                font-size: 24rpx;
                color: #333333;
            }
        }

        .details {
            width: 750rpx;
            height: 336rpx;
            background: #FFFFFF;
            box-shadow: 0rpx 6rpx 16rpx 0rpx rgba(0, 0, 0, 0.16);
            border-radius: 10rpx 10rpx 10rpx 10rpx;
            padding: 0rpx 30rpx;
            padding-top: 50rpx;
            margin-top: 20rpx;

            .detail {
                display: flex;
                justify-content: space-between;
                margin-bottom: 48rpx;

                .left {
                    font-weight: 400;
                    font-size: 24rpx;
                    color: #333333;
                }

                .right {
                    font-weight: 500;
                    font-size: 20rpx;
                    color: #333333;

                    .grey {
                        font-weight: 400;
                        font-size: 20rpx;
                        color: rgba(51, 51, 51, 0.8);
                    }
                    .seperate{
                        margin: 0rpx 18rpx;
                    }
                }
            }
        }
    }
    .zhanwei{
        width: 750rpx;
        height: 146rpx;
    }
</style>